<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box pub-p-b-50">
      <user-tab-list :list="tablist"></user-tab-list>
      <div style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
<!--        <div
            class="tips-area tips-icon pub-m-t-20"
            style="margin-bottom: 20px"
            :style="{
            backgroundImage: `url(${require('_a/userImages/' +
              (colorType == 0
                ? 'tips-icon'
                : colorType == 1
                ? 'tips-icon-g'
                : colorType == 2
                ? 'tips-icon-b'
                : 'tips-icon-p') +
              '@2x.png')})`,
          }"
        >-->
        <div
          class="tips-area pub-m-t-20"
          style="margin-bottom: 20px">
          温馨提示：您可以为通知项设置发送方式，建议您选择常用接收方式，防止消息遗漏造成损失!
        </div>

        <table class="table-area">
          <thead>
            <tr>
              <th><div class="line-style" style="justify-content: center;min-width: 48px">序号</div></th>
              <th><div class="line-style">通知项</div></th>
              <th><div class="line-style">短信</div></th>
              <th><div class="line-style">邮件</div></th>
              <th><div class="line-style">站内信</div></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in list" :key="index">
              <td>
                <div class="line-style" style="justify-content: center;">
                  <span class="normal-f">{{ index + 1 }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.name }}</span>
                </div>
              </td>
              <td>
                <div class="line-style flx-row-c-c">
                  <Checkbox
                    class="pub-m-l-20"
                    v-model="item[0].isSend"
                  ></Checkbox>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <Checkbox
                    class="pub-m-l-20"
                    v-model="item[1].isSend"
                  ></Checkbox>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <div>
                    <Checkbox
                      class="pub-m-l-20"
                      v-model="item[2].isSend"
                    ></Checkbox>
                  </div>
                  <!-- <div v-else>
                    <Checkbox class="pub-m-l-20"></Checkbox>
                  </div> -->
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <Empty-State
          v-if="total != null && total == 0"
          content="未搜索到任何内容！"
        ></Empty-State>
        <div class="flx-row-c-c pub-m-t-30">
          <div class="user-strong-button submit-button-style" @click="save">
            保存
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBottom } from "@/api/data";
import { messageTemplates, saveMessageTemplates } from "@/api/user";
export default {
  name: "VipSecurityLog",
  data() {
    return {
      loading: false,
      breadCrumb: [{name: "管理中心"},{ name: "账户管理" }, { name: "通知设置" }],
      tablist: [
        {
          name: "通知设置",
          to: "/user/noticeSetting",
        },
      ],
      // 表单数据
      time: [],
      startTime: "",
      endTime: "",
      colorType: 0,

      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [],
    };
  },
  created() {
    this.getList();
    if (this.$storage.getColorType()) {
      this.colorType = this.$storage.getColorType();
    } else {
      this.getBottom();
    }
  },
  methods: {
    async getBottom() {
      const { code, data } = await getBottom();
      if (code === 200) {
        this.colorType = data.colorType;
      }
    },
    // 获取列表
    async getList() {
      this.loading = true;
      let res = await messageTemplates();
      if (res.code == 200) {
        let obj = {};
        let newArr = [];
        res.data.map((item) => {
          if (!obj[item.sceneType]) {
            let arr = [];
            arr.name = item.name;
            item.isSend = item.isSend == 1 ? true : false;
            arr.push(item);
            newArr.push(arr);
            obj[item.sceneType] = item;
          } else {
            newArr.map((e) => {
              if (e[0].sceneType == item.sceneType) {
                item.isSend = item.isSend == 1 ? true : false;
                e.push(item);
              }
            });
          }
        });
        this.list = newArr;
        console.log(this.list)
      }
      this.loading = false;
    },
    // 保存
    async save() {
      let newList = [];
      this.list.map((item) => {
        item.map((e) => {
          newList.push(e);
        });
      });
      let obList = newList.map((e) => {
        return {
          type: e.type,
          isSend: e.isSend ? 1 : 0,
          sceneType: e.sceneType,
        };
      });
      let res = await saveMessageTemplates(obList);
      if (res.code == 200) {
        this.$Message.success("保存成功！");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
